<template>
  <div>
    <c-title :hide="false" text="ai咨询"></c-title>
    <div class="flex-col page">
      <div class="flex-row justify-between section">
        <div class="flex-col self-center">
          <div class="flex-row">
            <img class="shrink-0 image" src="https://shops.cg500.com/static/newimg/zcyc.png" />
          </div>
          <span class="text_3 mt-6-5">ai法律咨询平台</span>
        </div>
      </div>
      <div class="flex-col group_2">
        <div class="flex-col self-stretch relative section_2">
          <div class="flex-row justify-between items-center group_3" v-for="(item1,index) in ailist" :key="index">
            <span class="font">“{{ item1 }}”</span>
            <div class="flex-col justify-start items-center text-wrapper_2">
              <span class="font_2" @click="ai_shiyishi(item1)">试一试</span>
            </div>
          </div>
        </div>
        <div class="flex-row items-center self-stretch group_4">
          <div class="shrink-0 section_3"></div>
          <span class="text_4">正承云创 ai法律咨询平台</span>
          <div class="shrink-0 section_3 view"></div>
        </div>
        <div class="flex-col">
          <div class="flex-col justify-start" :class="item.role == 'assistant' ? 'self-start' : 'self-end'" v-for="(item,index) in textArr" :key="index">
            <span class="font text_5 text-wrapper_3" v-if="item.role == 'user'">{{ item.content }}</span>
            <span class="font text_55 text-wrapper_33" v-if="item.role == 'assistant'">{{ item.content }}</span>
          </div>
        </div>
        <div class="flex-col justify-start self-stretch relative">
          <div class="group_5"> </div>
        </div>
      </div>
      <div class="flex-row items-baseline relative section_6 qwe">
        <textarea class="self-start font text_8 asd" v-model="keyword" maxlength="1000" placeholder="请输入您想问的内容" :adjust-position="true"></textarea>
        <div class="btn" @click="submit">
          <img class="image_6" src="https://shops.cg500.com/static/zhengchengYC_jqr_send.png" />
        </div>
      </div>
      <div v-if="aishow" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);">
        <img style="width: 75px; height: 75px" src="https://shops.cg500.com/static/ai.gif" mode="" />
      </div>

      <div class="fixed-bottom" @click="rengong">
        <div >人工服务</div>
      </div>
    </div>
  </div>
</template>

<script>
import AinewpagesController from "./AinewpagesController";

export default AinewpagesController;
</script>

<style>
body {
    background-color: #f0f3fd !important;
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";

 .page {
    padding-bottom: 18px;
    // background-color: #f0f3fd;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    
  }
  .section {
    padding: 16px 13px 8px;
    background-image: linear-gradient(-84deg, #e3e4fd 0%, #eaecfe 100%);
  }
  .image {
    width: 170px;
    height: 53px;

  }
  .text_3 {
    margin-left: 2px;
    color: #151515;
    font-size: 26rpx;
    font-family: Source Han Sans SC;
    font-weight: 500;
    line-height: 13px;
  }
  
  
  .group_2 {
    padding: 17px 15px 200px 17px;
  }
  .section_2 {
    margin-left: 2px;
    margin-right: 15px;
    padding-left: 16px;
    padding-right: 14px;
    background-color: #ffffff;
    box-shadow: 0px 0px 9px #888ef30a;
    border-radius: 16px 16px 16px 2px;
  }
  .group_3 {
    padding: 9px 0;
    border-bottom: solid 1px #f0f1f6;
  }
  .font {
    font-size: 13px;
    font-family: PingFang SC;
    line-height: 13px;
    font-weight: 500;
    color: #1c1c43;
  }
  .text-wrapper_2 {
    padding: 9px 0;
    background-color: #f1f1fe;
    border-radius: 15px;
    width: 56px;
    height: 29px;
  }
  .font_2 {
    font-size: 12px;
    font-family: PingFang SC;
    line-height: 12px;
    font-weight: 500;
    color: #4339d8;
  }
  .group_4 {
    padding: 12px 3px 16px;
  }
  .section_3 {
    background-color: #e0e2f1;
    width: 85px;
    height: 1px;
  }
  .text_4 {
    margin-left: 19px;
    color: #b8bacc;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 12px;
  }
  .view {
    margin-left: 14px;
  }
  .text-wrapper_3 {
    padding: 15px;
    margin-top: 10px;
    background-image: linear-gradient(90deg, #9e8df7 0%, #757ef8 100%);
    border-radius: 16px 16px 2px 16px;
  }
  .asd {
    width: 90%;
    height: 100%;
    border: none;
  }
  .text-wrapper_33 {
    padding: 15px;
    margin-top: 10px;
    background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    border-radius: 16px 16px 16px 2px;
  }
  .text_5 {
    margin-left: 15px;
    margin-right: 12px;
    color: #ffffff;
    line-height: 20px;
  }
  .text_55 {
    margin-left: 15px;
    margin-right: 12px;
    line-height: 20px;
    text-align: left;
  }
  
  .group_5 {
    margin-left: 16px;
    margin-right: 5px;
    line-height: 18px;
  }
 
 
  .section_6 {
    padding: 20px 17px;
    background-color: #ffffff;
  }
  .qwe {
    width: 100%;
    height: 150px;
    position: fixed;
    bottom: 0px;
  }
.btn {
    display: flex;
    justify-content: center;
    margin-top: -10px;
}  
  .text_8 {
    color: #9696a5;
  }
 
  .image_6 {
    width: 29px;
    height: 29px;
  }
  
  
  .fixed-bottom {
    position: fixed;
    right: 10px;
    bottom: 230px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #8183f7;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 12px;
  }
</style>
